React Bootstrap — Form Grids, Sizing, and Inline Forms

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to add forms to a React app with React Bootstrap.

Form Grid

We can add form controls to a grid to create more complex layouts.

For instance, we can write:

import React from "react";
import Form from "react-bootstrap/Form";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Form>
        <Row>
          <Col>
            <Form.Control placeholder="First name" />
          </Col>
          <Col>
            <Form.Control placeholder="Last name" />
          </Col>
        </Row>
      </Form>
    </>
  );
}

to display the first name and last name inputs side by side.

Col has the columns.

Form Row

We can replace Row with Form.Row to display a row of form controls/

For example, we can write;

import React from "react";
import Form from "react-bootstrap/Form";
import Col from "react-bootstrap/Col";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Form>
        <Form.Row>
          <Col>
            <Form.Control placeholder="First name" />
          </Col>
          <Col>
            <Form.Control placeholder="Last name" />
          </Col>
        </Form.Row>
      </Form>
    </>
  );
}

and get the same result as before.

Horizontal Form Label Sizing

We can change the form label sizing with the column prop.

For instance, we can write:

import React from "react";
import Form from "react-bootstrap/Form";
import Col from "react-bootstrap/Col";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Form>
        <Form.Group>
          <Form.Row>
            <Form.Label column="lg" lg={2}>
              Large
            </Form.Label>
            <Col>
              <Form.Control size="lg" type="text" placeholder="Large" />
            </Col>
          </Form.Row>
          <br />
          <Form.Row>
            <Form.Label column lg={2}>
              Normal
            </Form.Label>
            <Col>
              <Form.Control type="text" placeholder="Normal" />
            </Col>
          </Form.Row>
          <br />
          <Form.Row>
            <Form.Label column="sm" lg={2}>
              Small
            </Form.Label>
            <Col>
              <Form.Control size="sm" type="text" placeholder="Small" />
            </Col>
          </Form.Row>
        </Form.Group>
      </Form>
    </>
  );
}

We have the Form.Row and Col component to add our rows and columns,

The column prop on Form.Label lets us change the size of the labels.

The size prop on the Form.Control lets us change the size of the form controls.

Column Sizing

We can change the column sizing with the breakpoint props.

These props include xs for changing column sizes for small screens.

sm for changing column sizes for medium-sized screens.

lg for changing column sizes for large-sized screens.

xl lets us change column sizes for extra-large screen sizes.

For instance, we can write:

import React from "react";
import Form from "react-bootstrap/Form";
import Col from "react-bootstrap/Col";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Form>
        <Form.Row>
          <Col xs={5}>
            <Form.Control placeholder="Address" />
          </Col>
          <Col xs={3}>
            <Form.Control placeholder="City" />
          </Col>
          <Col>
            <Form.Control placeholder="State" />
          </Col>
          <Col>
            <Form.Control placeholder="Zip" />
          </Col>
        </Form.Row>
      </Form>
    </>
  );
}

We change the columns for extra small screens and up.

We change the Address field to take up 5 out of 12 columns.

And City field takes up 3 out of 12 columns.

Auto-Sizing

We can change the breakpoint props to auto to change the size.

For example, we can write:

import React from "react";
import Form from "react-bootstrap/Form";
import Col from "react-bootstrap/Col";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Form>
        <Form.Row>
          <Col xs="auto">
            <Form.Control placeholder="Address" />
          </Col>
          <Col xs="auto">
            <Form.Control placeholder="City" />
          </Col>
          <Col>
            <Form.Control placeholder="State" />
          </Col>
          <Col>
            <Form.Control placeholder="Zip" />
          </Col>
        </Form.Row>
      </Form>
    </>
  );
}

We change the first 2 columns to auto to let React Bootstrap decide the size for us.

Inline Forms

We can add the inline prop to make the form inline.

For example, we can write:

import React from "react";
import Form from "react-bootstrap/Form";
import InputGroup from "react-bootstrap/InputGroup";
import FormControl from "react-bootstrap/FormControl";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Form inline>
        <Form.Label>Name</Form.Label>
        <Form.Control
          className="mb-2"
          id="inlineFormInputName2"
          placeholder="Jane Doe"
        />
        <Form.Label>Username</Form.Label>
        <InputGroup className="mb-2 mr-sm-2">
          <InputGroup.Prepend>
            <InputGroup.Text>@</InputGroup.Text>
          </InputGroup.Prepend>
          <FormControl placeholder="Email" />
        </InputGroup>
        <Form.Check type="checkbox" className="mb-2" label="Remember me" />
      </Form>
    </>
  );
}

We just add the inline prop to the Form so that we can make the form element display inline.

Conclusion

There’re many ways to layout forms.

We can make it inline.

And we can add rows and columns to place the input controls where we want them.